import React from 'react';
// ! @jsxImportSource @emotion/react 该注释必须存在，否则相应的css不会被解析
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import styles from '../../assets/comInherit.module.css';
/**
 * 组合 继承
 */

const color = 'darkgreen';

function FancyBorder(props) {
  let colorBlue = 'FancyBorder-' + props.color;
  return <div className={`${styles[colorBlue]} ${styles['FancyBorder']}`}>{props.children}</div>;
}

// !创建一个样式化组件，使用props来传值
const CssInJsButton = styled.button`
  ${props => css`
    background-color: ${props.backgroundColor};
    color: ${props.textColor};
    border: 1px solid ${props.borderColor};
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
  `}
`;
const StylesButton = styled.button`
  background-color: lightblue;
  padding: 10px 20px;
  color: red;
  font-size: 24px;
  border: 1px solid;
  border: none;
  color: white;
  cursor: pointer;
  &:hover {
    background-color: ${color};
  }
`;

// !使用css的方法
const myStyle = css`
  background-color: lightblue;
  padding: 10px 20px;
  color: red;
  border: 1px solid;
`;

export default function WelcomeDialog() {
  return (
    <FancyBorder color='blue'>
      <h1>welcome</h1>
      <p>children 组件</p>
      {/* 使用 css-in-js emotion */}
      <div css={myStyle}>hello emotion css-in-js</div>
      <StylesButton>emotion styled</StylesButton>
      <CssInJsButton
        css={css`
          margin-top: 1rem;
        `}
        backgroundColor='blue'
        textColor='white'
        borderColor='blue'
      >
        Click me!
      </CssInJsButton>
    </FancyBorder>
  );
}
